<template>
  <div class="profilePage">
    <div class="prifile">
      <div class="leftView">
        <el-menu
          :default-active="defaultActive"
          active-text-color="#1289FF"
          background-color="#fff"
          class="el-menu-vertical-demo"
          mode="vertical"
          router
          text-color="#6A6A6A"
          @close="handleClose"
          @open="handleOpen"
        >
          <el-submenu index="1">
            <template slot="title">
              <img alt="" src="./images/账号管理.png" />
              <span class="viewLeft">账号管理</span>
            </template>
            <el-menu-item index="/mall/profile/information"
            >个人资料
            </el-menu-item>
            <el-menu-item index="/mall/fundManagement">资金管理</el-menu-item>
            <!-- 携带参数 -->
            <el-menu-item index="/mall/profile/address">收货地址</el-menu-item>
            <el-menu-item index="/mall/profile/coupon">优惠卡卷</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <img alt="" src="./images/订单中心.png" />
              <span class="viewLeft">订单中心</span>
            </template>
            <el-menu-item index="/mall/myOrder">我的订单</el-menu-item>
            <el-menu-item index="/mall/profile/myFavorite/doteyCollect"
            >我的收藏
            </el-menu-item>
            <!-- <el-menu-item index="/mall/profile/evaluationOrder"
            >评价订单
            </el-menu-item> -->
            <el-menu-item index="/mall/profile/evaluationManagement"
            >评价管理
            </el-menu-item>
            <el-menu-item index="/mall/profile/refund">退货</el-menu-item>
            <el-menu-item index="/mall/profile/record">浏览记录</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <img alt="" src="./images/服务中心.png" />
              <span class="viewLeft">服务中心</span>
            </template>
            <el-menu-item index="/mall/profile/complaint"
            >投诉管理</el-menu-item
            >
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <img alt="" src="./images/账号管理.png" />
              <span class="viewLeft">关于我们</span>
            </template>
            <el-menu-item index="/mall/profile/userGuide"
            >使用教程</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </div>
      <div class="viewContent">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProfilePage',

  /* 数据 */
  data() {
    return {
      defaultActive: ''
    }
  },

  /* 计算属性 */
  computed: {},

  /* 监听器 */
  watch: {
    // 监听路由变化
    $route(to, from) {
      this.defaultActive = to.path
    }
  },

  /* 初始化阶段 */
  created() {
    // 获取当前路径
    this.defaultActive = this.$route.path
    // 第一次加载的时候重定向到个人资料页面
    if (this.$route.path === '/mall/profile') {
      this.$router.push({ path: '/mall/profile/information' })
    }
  },

  /* 方法 */
  methods: {
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    toProduct() {
      // 点击跳转，参数：goodsId:'42'
      this.$router.push({ path: '/mall/product', query: { id: '42' } })
    }
  }
}
</script>

<style lang="scss" scoped>
.profilePage {
  margin-top: 20px;
  width: 100%;
  height: 100%;

  background: #f8f8f8;
  // padding: 20px;
  * {
    box-sizing: border-box;
    // margin: 0;
    // padding: 0;
  }

  .prifile {
    display: flex;
    justify-content: space-between;

    width: 1240px;
    height: 1041px;
    margin: 0 auto;

    .leftView {
      width: 210px;
      // height: 1041px;
      border-radius: 4px;
      background: #fff;

      .viewLeft {
        font-family: "Source Han Sans CN";
        font-size: 18px;
        font-weight: 400;

        margin-left: 8px;

        color: #1289ff;
        background: #fff;
      }

      ::v-deep .el-menu-item {
        font-size: 16px;
      }

      ::v-deep .el-menu {
        background: #fff;
      }
    }

    .viewContent {
      width: 1010px;
      height: 1041px;
      border-radius: 4px;
    }
  }
}
</style>
